<template>
  <div class="submit-order">
    <!-- 收货地址 -->
    <view class="delivery-addr" @click="toAddrListPage">
      <view class="addr-bg" v-if="!userAddr">
        <view class="add-addr">
          <text>新增收货地址</text>
        </view>
        <view class="arrow empty"></view>
      </view>
      <view class="addr-bg whole" v-if="userAddr">
        <view class="addr-icon">
          <image
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F9%2F27%2Fd55df8c1-a613-4086-a8a0-dc2e13cf4c30.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641726539&t=c3372b558949d6b0e66462fed05730de"
          ></image>
        </view>
        <view class="user-info">
          <text class="item">{{ userAddr.receiver }}</text>
          <text class="item">{{ userAddr.mobile }}</text>
        </view>
        <view class="addr"
          >{{ userAddr.province }}{{ userAddr.city }}{{ userAddr.area
          }}{{ userAddr.addr }}</view
        >
        <view class="arrow"></view>
      </view>
    </view>

    <!-- 订单每项商品 -->
    <div class="prod-item" v-for="item in settlement" :key="item.basketId">
      <div class="item-cont">
        <div class="prod-pic">
          <img :src="item.pic" alt="" />
        </div>
        <div class="prod-info">
          <div class="prodname">{{ item.prodName }}</div>
          <div class="prod-info-cont"></div>

          <view class="price-nums">
            <text class="prodprice"
              ><text class="symbol">￥</text>
              <text class="big-num">{{ item.price }}</text>
            </text>
            <text class="prodcount">x{{ item.prodCount }}</text>
          </view>
        </div>
      </div>
    </div>

    <!-- 总数+价格 -->
    <view class="total-num">
      <text class="prodcount">共{{ totalCount }}件商品</text>
      <view class="prodprice"
        >合计:
        <text class="symbol">￥</text>
        <text class="big-num">{{ actualTotal }}</text>
      </view>
    </view>

    <!-- 订单详情 -->
    <view class="order-msg">
      <view class="msg-item">
        <view class="item coupon" @click="showCouponPopup">
          <text class="item-tit">优惠券:</text>
          <text class="item-txt">暂无可用</text>
          <text class="coupon-btn">0张</text>
          <text class="arrow"></text>
        </view>
        <view class="item">
          <text>买家留言:</text>
          <input
            value="{{}}"
            placeholder="给卖家留言"
            bindinput="onRemarksInput"
          />
        </view>
      </view>
    </view>

    <!-- 订单金额 -->
    <view class="order-msg">
      <view class="msg-item">
        <view class="item">
          <view class="item-tit">订单总额:</view>
          <view class="item-txt price">
            <text class="symbol">￥</text>
            <text class="big-num">{{ actualTotal }}</text>
          </view>
        </view>
        <view class="item">
          <view class="item-tit">运费:</view>
          <view class="item-txt price">
            <text class="symbol">￥</text>
            <text class="big-num">00</text>
          </view>
        </view>
        <view class="item">
          <view class="item-tit">优惠金额:</view>
          <view class="item-txt price">
            <text class="symbol">￥</text>
            <text class="big-num">0</text>
          </view>
        </view>
        <view class="item payment">
          <view class="item-txt price">
            小计:
            <text class="symbol">￥</text>
            <text class="big-num">{{ actualTotal }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部栏 -->
    <view class="submit-order-footer">
      <view class="sub-order">
        <view class="item-txt">
          合计:
          <view class="price">
            <text class="symbol">￥</text>
            <text class="big-num">{{ actualTotal }}</text>
          </view>
        </view>
      </view>
      <view class="footer-box" @click="toPay"> 提交订单 </view>
    </view>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState({
      settlement: (state) => state.basket.settlement,
      carId: (state) => state.basket.carId,
      actualTotal: (state) => state.basket.actualTotal, //总价
      totalCount: (state) => state.basket.totalCount, //总数
      userAddr: (state) => state.basket.userAddr,
      order: (state) => state.basket.order,
      ress: (state) => state.basket.ress,
    }),
  },

  methods: {
    ...mapActions({
      getConfirm: "basket/getConfirm",
      getSubmit: "basket/getSubmit",
    }),

    showCouponPopup() {
      console.log("优惠券");
    },

    //地址
    toAddrListPage() {
      wx.navigateTo({
        url: "/pages/user/address/index",
      });
    },

    //提交订单
    async toPay() {
      if (!this.userAddr) {
        wx.showToast({
          title: "请选择地址",
          icon: "none",
        });
        return;
      }
      await this.getSubmit({ orderShopParam: [{ remarks: "", shopId: 1 }] });
      wx.hideLoading();
      // this.getPay();
      console.log("res...", this.ress);
      wx.requestPayment({
        timeStamp: this.ress.timeStamp,
        nonceStr: this.ress.nonceStr,
        package: this.ress.packageValue,
        signType: this.ress.signType,
        paySign: this.ress.paySign,
        success: (e) => {
          console.log("支付成功");
          wx.navigateTo({
            url: `/pages/basket/pay-result/index?sts=${1}`,
          });
        },
        fail: (err) => {
          console.log(err.errMsg.split(":")[1]);
          console.log("支付失败");
          wx.navigateTo({
            url: `/pages/basket/pay-result/index?sts=${0}`,
          });
        },
      });
    },
  },

  onLoad() {
    this.getConfirm({
      addrId: 0,
      basketIds: this.carId,
      couponIds: [],
      userChangeCoupon: 1,
    });
  },
};
</script>

<style src="./index.css"></style>
